<template>
    <p style="font-size: 20px;font-weight: 400;margin-bottom: 10px;">{{ $t(title) }}</p>

    <!-- 头部按钮 -->
    <div class="search-box">
        <el-button type="primary" @click="addShow">{{ $t('data.add') }}</el-button>
    </div>

    <!-- 表格 -->

    <el-table :data="datas" class="tableStyle" border stripe default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id">


        <el-table-column :label="$t('column.title')" align="center">
            <template #default="scope">
                {{ $t(scope.row.title) }}</template>
        </el-table-column>
        <el-table-column prop="sort" label="sort " align="center"></el-table-column>
        <el-table-column prop="name" :label="$t('column.name')" align="center"></el-table-column>
        <el-table-column prop="path" :label="$t('column.path')" align="center"></el-table-column>
        <el-table-column prop="component" :label="$t('column.component')" align="center"></el-table-column>
        <el-table-column :label="$t('icon')" align="center">
            <template #default="scope">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="scope.row.icon"></use>
                </svg>
            </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('column.operations')" min-width="120" align="center">
            <template #default="scope">
                <el-button type="primary" size="small" @click="eidtShow(scope.row)">{{ $t('data.edit') }}</el-button>
                <el-popconfirm :title="$t('data.delConfirm')" @confirm="del(scope.row.id)">
                    <template #reference>
                        <el-button type="danger" size="small">{{ $t('data.delete')
                            }}</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <!-- 表单 -->
    <el-dialog v-model="formDialog" :title="$t(formParameter.title)" width="800" :before-close="handleClose">
        <el-form :model="data" ref="ruleFormRef" :rules="rules" hide-required-asterisk style="width: 80%;margin: auto;">
            <el-row>
                <el-col :span="9">
                    <el-form-item label="根路径">
                        <el-select v-model="parentId" @change="selectChange">
                            <el-option :value="0" label="/">
                            </el-option>
                            <el-option v-for="component in datas" :value="component.id" :label="$t(component.title)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="Sort" prop="sort" label-width="50">
                        <el-input v-model="data.sort" clearable /></el-form-item>
                </el-col>
                <el-col :span="4">
                    <p style="text-align: right;line-height: 32px;">Count：{{ count }}</p>
                </el-col>
            </el-row>

            <el-row>

                <el-col :span="11">
                    <el-form-item :label="$t('column.title')" label-width="40" prop="title">
                        <el-input v-model="data.title" @input="titleChange" clearable />
                    </el-form-item></el-col>
                <el-col :span="12">
                    <el-form-item :label="$t('column.name')" label-width="50" prop="name">
                        <el-input v-model="data.name" clearable />
                    </el-form-item></el-col>
            </el-row>
            <el-row>

                <el-col :span="11">
                    <el-form-item :label="$t('column.path')" label-width="40" prop="path">
                        <el-input v-model="data.path" clearable />
                    </el-form-item></el-col>
                <el-col :span="12">
                    <el-form-item :label="$t('column.component')" label-width="50" prop="component">
                        <el-input v-model="data.component" clearable />
                    </el-form-item></el-col>
            </el-row>
            <el-row>

                <el-col :span="11">
                    <el-form-item :label="$t('icon')" label-width="40" prop="icon">
                        <el-input v-model="data.icon" clearable>
                            <template #append><svg class="icon" aria-hidden="true">
                                    <use :xlink:href="data.icon"></use>
                                </svg></template>
                        </el-input>
                    </el-form-item></el-col>

                <el-col :span="12">
                    <el-form-item :label="$t('role.role')" label-width="50" prop="icon">
                        <el-input v-model="data.roleTemp" @change="tagChange" clearable>
                            <template #prefix>
                                <el-tag type="primary" style="margin-right: 5px" v-for="(item, index) in tags" closable
                                    @close="tagClose(index)">{{ item }}</el-tag>
                            </template> </el-input>
                    </el-form-item></el-col>
            </el-row>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="canelChange">{{ $t('data.cancel') }}</el-button>
                <el-button type="primary" v-if="formParameter.type == 'add'" @click="addChange(ruleFormRef)">
                    {{ $t('data.add') }}
                </el-button>
                <el-button type="primary" v-else @click="editChange(ruleFormRef)">
                    {{ $t('data.edit') }}
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-pagination style="padding-top: 30px;" background layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" :page-sizes="[10, 30, 50, 100]" v-model:current-page="page.index"
        v-model:page-size="page.size" @size-change="pageChange" @current-change="pageChange" />
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
import routerApi from '@/api/routerApi.js'
import api from './api'
const title = 'menu.urlPath'
import inputHelp from '@/utils/inputHelp';

const parentId = ref(0)
const count = ref(0)
const formParameter = ref({
    title: 'data.add',
    type: 'add'
})

// search
//显示新增对话框
const addShow = () => {
    formParameter.value.title = 'data.add'
    formParameter.value.type = 'add'
    formDialog.value = true
    count.value = datas.value.length
    parentId.value = 0
    tags.value = []
    data.value = {
        path: '',
        title: '',
        component: '',
        name: '',
        id: 0,
        parentid: 0,
        icon: '',
        sort: '00'
    }
    if (count.value / 10 >= 1) {
        data.value.sort = (count.value / 10 + count.value % 10 + 1) + ''
    } else {
        data.value.sort = '0' + (count.value + 1)
    }
    console.log('addChange')

}
const page = ref({
    total: 100,
    index: 1,
    size: 10
})

const data = ref({
    path: '',
    title: '',
    component: '',
    name: '',
    id: 0,
    parentid: 0,
    icon: '',
    sort: '00'
})

const datas = ref([])
// routerApi.getRouter().then(res => {
//     datas.value = res.datas
//     page.total = res.total
// })

const getMenus = () => {
    api.select(page.value).then(res => {
        datas.value = res.datas
        page.value.total = res.total
    })
}
getMenus()
const formDialog = ref(false)


//校验
const titleChange = (value) => {
    data.value.title = inputHelp.isI18n(value)
}


const tags = ref([])

//标签
const tagChange = () => {
    if (data.value.roleTemp == '') {
        return
    }
    if (tags.value.length == 3) {
        return
    }
    if (tags.value.length > 0) {
        data.value.role = '1'
    }
    tags.value.push(data.value.roleTemp)
    data.value.roleTemp = ''
    console.log(tags.value)
}

const tagClose = (index) => {
    tags.value.splice(index, 1)
    console.log(tags.value)
}


//根路径下拉框
const selectChange = (value) => {
    if (value == 0) {
        count.value = datas.value.length
        if (count.value / 10 >= 1) {
            data.value.sort = (count.value / 10 + count.value % 10 + 1) + ''
        } else {
            data.value.sort = '0' + (count.value + 1)
        }

    } else {
        count.value = datas.value.find(x => x.id == value).children?.length || 0
        if (count.value / 10 >= 1) {
            data.value.sort = (count.value / 10 + count.value % 10 + 1) + ''
        } else {
            data.value.sort = '0' + (count.value + 1)
        }
    }

    console.log(value)

    data.value.parentid = 0
    if (value != 0) {
        if (datas.value.find(x => x.id == value).children) {
            data.value.parentid = value
        }
    }

}


const eidtShow = (row) => {
    formParameter.value.title = 'data.edit'
    formParameter.value.type = 'edit'
    formDialog.value = true
    count.value = datas.value.length
    data.value = JSON.parse(JSON.stringify(row))
    tags.value = data.value.role.split(',')
    parentId.value = data.value.parentid
    // selectChange(data.value.parentid)
    console.log(data)

}

const del = (id) => {
    api.del(id).then(res => {
        var type = 'error'
        if (res.success) {
            type = 'success'
            formDialog.value = false
            datas.value = datas.value.filter(x => x.id != id)
        }
        ElMessage({
            type: type,
            message: res.message
        })
    })
}

const canelChange = () => {
    formDialog.value = false
}
const ruleFormRef = ref()
//表单校验
import rule from './rules.js'
const rules = reactive(rule.rules)


const addChange = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            data.value.role = ''
            tags.value.forEach((item, index) => {
                if (index == 0) {
                    data.value.role = item
                } else {
                    data.value.role += ',' + item
                }
            })
            api.add(data.value).then(res => {
                var type = 'error'
                if (res.success) {
                    type = 'success'
                    formDialog.value = false
                    getMenus()
                }
                ElMessage({
                    type: type,
                    message: res.message
                })

            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const editChange = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            data.value.role = ''
            tags.value.forEach((item, index) => {
                if (index == 0) {
                    data.value.role = item
                } else {
                    data.value.role += ',' + item
                }
            })
            api.update(data.value).then(res => {
                var type = 'error'
                if (res.success) {
                    type = 'success'
                    formDialog.value = false
                    if (data.value.parentid == 0) {
                        datas.value[datas.value.findIndex(x => x.id == data.value.id)] = JSON.parse(JSON.stringify(data.value))
                    } else {
                        let parentData = datas.value[datas.value.findIndex(x => x.id == data.value.parentid)]
                        parentData.children[parentData.children.findIndex(x => x.id == data.value.id)] = JSON.parse(JSON.stringify(data.value))
                    }
                }
                ElMessage({
                    type: type,
                    message: res.message
                })

            })
            console.log('submit!')
            // formDialog.value = false

        } else {
            console.log('error submit!', fields)
        }
    })
}



const pageChange = () => {
    console.log(page.value)
}




</script>

<style lang="scss">
.mb20 {
    margin-bottom: 20px;
}

.search-box {
    margin-bottom: 20px;
}
</style>